* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}
:root {
	--theme-color: #1ecc94;
	--theme-color-like: #ff6664;
	--text-default-color: #000;
	--text-default2-color: #fff;
	--text-default3-color: #949494;
	--text-default4-color: #fff;
	--text-default-a-color: #303030;
	--text-default2-a-color: #bbb;
	--text-default3-a-color: #999;
	--text-desc-color: #94a3b8;
	--text-active-color: #fff;
	--global-sidebar: #f0f0f0;
	--global-bg: #f6f6f6;
	--global-bg2: #fff;
	--global-bg3: #e3e3e3;
	--global-bg4: #f6f6f6;
	--global-bg5: #ebebeb;
	--global-bg6: #ebebeb;
	--global-bg7: #efefef;
	--global-hover-bg: #d8d8d8;
	--global-hover2-bg: #efefef;
	--global-hover3-bg: rgba(255, 255, 255, 0.6);
	--global-border: rgba(230, 230, 230, 0.5);
	--global-border2: #ddd;
	--global-border3: #ccc;
	--global-border4: #666;
	--search-bg: #e3e3e3;
	--linear-gradient: #1fd4ae, #1ecc95;
	--shadow-black: rgba(0, 0, 0, 0.2);
	--transparent-white: rgba(255, 255, 255, 0.9);
	--scroll-bg: #d4d4d4;
	--scorll-hove-bg: #909399;
	--textarea-bg: #efefef;
	--gender-boy: #26a6e4;
	--gender-girl: #ffb8d5;
	--play-mask: rgba(0, 0, 0, 0.35);
}
.dark {
	--theme-color: #19a579;
	--global-sidebar: #171718;
	--text-default-a-color: rgba(235, 235, 235, 0.6);
	--text-default2-a-color: #aaa;
	--text-default3-a-color: #bbb;
	--text-default-color: rgba(235, 235, 235, 0.6);
	--text-default2-color: rgba(235, 235, 235, 0.8);
	--text-default3-color: rgba(210, 210, 210, 0.8);
	--text-default4-color: #d1d1d1;
	--text-active-color: #d1d1d1;
	--global-hover-bg: #242425;
	--global-hover2-bg: #242425;
	--global-hover3-bg: rgba(0, 0, 0, 0.6);
	--global-border: rgba(84, 84, 84, 0.48);
	--global-border2: rgba(84, 84, 84, 0.48);
	--global-border3: #333;
	--global-border4: #333;
	--search-bg: #343435;
	--global-bg: #1e1e1f;
	--global-bg2: #29292b;
	--global-bg3: #242424;
	--global-bg4: #29292b;
	--global-bg5: #434343;
	--global-bg6: #2f2f2f;
	--global-bg7: #242424;
	--scroll-bg: #424242;
	--scorll-hove-bg: #686868;
	--shadow-black: rgba(0, 0, 0, 0);
	--transparent-white: rgba(0, 0, 0, 0.5);
	--textarea-bg: #242424;
	--gender-boy: #26a5e4bd;
	--gender-girl: #ffb8d6bd;
	--play-mask: rgba(0, 0, 0, 0.6);
}
body {
	height: 100%;
	color: var(--text-default-color);
	background-color: var(--global-bg);
	font: 14px/1.4 Helvetica Neue, Helvetica, Arial, Microsoft Yahei, Hiragino Sans GB, Heiti SC,
		WenQuanYi Micro Hei, sans-serif;
	overflow: hidden;
}
a {
	text-decoration: none;
	color: var(--text-default-a-color);
	outline: none;
}
img {
	max-width: 100%;
	max-height: 100%;
	vertical-align: middle;
}
ul {
	list-style: none;
}
.ellipsis {
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

.overflow {
	overflow: hidden;
}

.scroll {
	&::-webkit-scrollbar {
		width: 0.4rem;
	}
	&::-webkit-scrollbar-thumb {
		background: var(--scroll-bg); // 滑块颜色
		border-radius: 5px; // 滑块圆角
	}
	&::-webkit-scrollbar-thumb:hover {
		background: var(--scorll-hove-bg); // 鼠标移入滑块
	}
}

// 屏幕大于 1024px
@media screen and (max-width: 1024px) {
	html {
		font-size: 12px;
	}
}
@media screen and (min-width: 1024px) {
	html {
		font-size: 14px;
	}
}
@media screen and (min-width: 1280px) {
	html {
		font-size: 16px;
	}
}
.fade-header-enter-from,
.fade-header-leave-to {
	transform: translateY(-10px);
	opacity: 0;
}
.fade-header-enter-active,
.fade-header-leave-active {
	transition: all 0.3s;
}
.fade-header-enter-to,
.fade-header-leave-from {
	transform: none;
	opacity: 1;
}

.more-actions-enter-from,
.more-actions-leave-to {
	opacity: 0;
}
.more-actions-enter-active,
.more-actions-leave-active {
	transition: all 0.3s;
	transform-origin: top left;
}
.more-actions-enter-to,
.more-actions-leave-from {
	opacity: 1;
}
